<script setup lang='ts'>
import { ref, reactive } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import _ from 'lodash'
import { Search, Minus, Plus } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useEnumStore } from "@/store/enumeration";
import useInstance from "@/hooks/useInstance";
import { useComListData } from "@/store/list"
import { equityPackageAddPost } from "@/api/equity"
import {isValidInput} from "@/utils/validate"
defineOptions({
    name: "addPackage",
});


const { listCollect } = useComListData()
const ruleFormRef = ref<FormInstance>();


const {
    schemeConfigletailsType
} = useEnumStore();
const emit = defineEmits(["refresh",'searchEdit']);
const { global } = useInstance();

const dialogBasic = ref({
    title: "新建权益包",
    visible: false,
    width: 700,
    height: 300,
    showFooter: true,
    marginTop: "10vh",
})


// 如何设计 就是单独操作 最后在弄在一起 
const packageForm = reactive({
    packageName: null,// 权益包名称
    packageConfigList: [{
        packageCode: null,
        portfolioCode: null,
        equityType: 1
    }]

})

const rules = reactive<FormRules>({
    packageName: [
        {
            required: true,
            trigger: "blur",
            message: "请输入权益包名称",
        },
        { validator: isValidInput, trigger: 'blur' }
    ],
})

//显示弹框
const show = (type: string, row?: any) => {
    console.log(row);
    
    dialogBasic.value.visible = true

    if (type == 'add') {
        dialogBasic.value.title = '新增权益包'

        if (packageForm.packageConfigList) {
            packageForm.packageConfigList.length = 0
            packageForm.packageConfigList.push({
                packageCode: null,
                portfolioCode: null,
                equityType: 1
            })
        }else{
            packageForm.packageConfigList=[]
            packageForm.packageConfigList.push({
                packageCode: null,
                portfolioCode: null,
                equityType: 1
            })
        }
    } else {
        dialogBasic.value.title = '编辑权益包'
        Object.assign(packageForm, row)


    }
}



const onClose = () => {
    dialogBasic.value.visible = false
    // @ts-ignore
    Object.keys(packageForm).forEach((item) => packageForm[item] = null)

    packageForm.packageConfigList = []

}

const onConfirm = async () => {
    const arr: any = {}
    Object.assign(arr, packageForm)

    await ruleFormRef.value?.validate(async isOk => {
        if (isOk) {


            const res = await equityPackageAddPost(arr);
            if (res.code == 20000) {
                ElMessage({
                    type: "success",
                    message: packageForm.id ? "权益包编辑成功" : "权益包新增成功",
                });
                if(packageForm.id){
                    emit("searchEdit");

                }else{
                emit("refresh");

                }
                onClose();
            }
        } else {
            ElMessage({
                type: "error",
                message: packageForm.id
                    ? "权益包编辑失败 请重试！"
                    : "权益包新增失败 请重试！",
            });
        }
    })
}
const lessReduceMoney = (domain: any, type: number) => {
    const index = packageForm.packageConfigList.indexOf(domain)
        if (index !== -1) {
            packageForm.packageConfigList.splice(index, 1)
        }
 }
const addPackage = () => {
    packageForm.packageConfigList.push({
        packageCode: null,
        portfolioCode: null,
        equityType: 1
    })
}
const typeChange=(e:any,domain:any)=>{
    console.log(e,domain);
    if(domain.portfolioCode){
        domain.portfolioCode=null
    }
}
defineExpose({
    show
})
</script>

<template>
    <SysDialog :title="dialogBasic.title" :width="dialogBasic.width" :height="dialogBasic.height"
        :show-footer="dialogBasic.showFooter" :visible="dialogBasic.visible" :margin-top="dialogBasic.marginTop"
        @on-close="onClose" @on-confirm="onConfirm">
        <template v-slot:content>
            <div class="channel-form" v-loading="false">
                <el-form ref="ruleFormRef" :model="packageForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                    status-icon>
                    <!--   status-icon -->
                    <el-form-item label="权益包名称" prop="packageName">
                        <normal-input v-model:model-value="packageForm.packageName" maxlength="120"
                            show-word-limit></normal-input>
                    </el-form-item>

                    <el-form-item v-for="(domain, index) in packageForm.packageConfigList" :key="index" label="选择权益分类"
                        :prop="'packageConfigList.' + index + '.portfolioCode'" :rules="{
                            required: true,
                            message: '请选择权益组合',
                            trigger: 'change',
                        }">
                        <el-row style="width: 100%;" justify="space-between" :gutter="5"
                            v-if="listCollect.equityPortfolioList && domain.equityType">
                            <el-col :span="10" >
                                <el-select style="width: 100%;" v-model="domain.equityType" @change="typeChange($event,domain)" placeholder="权益分类">
                                    <el-option v-for="item in schemeConfigletailsType" :key="item.id"
                                        :label="item.value" :value="item.key" />
                                </el-select>
                            </el-col>
                            <el-col :span="10">
                                <el-select style="width: 95%;margin-right: 10px;" v-model="domain.portfolioCode"
                                    placeholder="权益组合">
                                    <el-option v-for="item in listCollect.equityPortfolioList" :key="item.id"
                                        :label="item.portfolioName" v-show="item.equityType == domain.equityType"
                                        :value="item.portfolioCode" />
                                </el-select>
                             
                            </el-col>
                            <el-col :span="4">
                                <el-button type="danger" @click="lessReduceMoney(domain, 1)"
                                v-if="packageForm.packageConfigList.length > 1" :icon="Minus"> </el-button>
                            </el-col>
                        </el-row>

                    </el-form-item>
                    <el-form-item label="">
                        <el-button :icon="Plus" style="width: 100%;margin-top: 10px;" type="primary"
                            @click="addPackage">添加权益组合</el-button>
                    </el-form-item>



                </el-form>
            </div>
        </template>
    </SysDialog>
</template>

<style lang='scss' scoped>
.channel-form {
    height: 350px;
    overflow: auto;
}

:deep(.el-radio__inner) {
    border-radius: 2px !important;
}

:deep(.el-radio__input.is-checked .el-radio__inner::after) {
    content: '';
    width: 8px;
    height: 3px;
    border: 1px solid black;
    border-top: transparent;
    border-right: transparent;
    text-align: center;
    display: block;
    position: absolute;
    top: 3px;
    left: 2px;
    transform: rotate(-45deg);
    border-radius: 0px;
    background: none;
}

:deep(.el-select__suffix) {
    .el-input__validateIcon {
        display: none;
    }
}
</style>
